import React from 'react'
import { Routes, Route, Outlet, Link } from 'react-router-dom'
import Highlights from '../Musichallcomponents/Highlights'
import Charts from '../Musichallcomponents/Charts'
import Artists from '../Musichallcomponents/Artists'
import Playlist_Categories from '../Musichallcomponents/Playlist_Categories'
import Playlist from '../songLists/Playlist'

const Playhall = () => {
  return (
    <div className="favor">
      <div className="recent_top">
        <p className="titl">乐馆</p>
        <div className="recent_nav">
          <div className="recent_nav_li">
            <ul>
              <li><Link to="highlights">精选</Link></li>
              <li><Link to="charts">排行</Link></li>
              <li><Link to="artists">歌手</Link></li>
              <li><Link to="playlist-categories">分类歌单</Link></li>
            </ul>
          </div>
        </div>
      </div>

      <div className="recent_main">
        <Routes>
          <Route path="highlights/*" element={<Highlights />} />
          <Route path="charts" element={<Charts />} />
          <Route path="artists" element={<Artists />} />
          <Route path="playlist-categories" element={<Playlist_Categories />} />
        </Routes>
      </div>
    </div>
  );
};

export default Playhall;
